<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url("https://img1.baidu.com/it/u=684770079,849342797&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800") center top no-repeat;
        }

        ul {
            height: 60px;
            width: 300px;
            margin: auto;
        }

        img,
        li {
            list-style: none;
            height: 60px;
            width: 60px;
            float: left;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="https://img1.baidu.com/it/u=684770079,849342797&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                alt=""></li>
        <li><img src="https://img1.baidu.com/it/u=3066966427,1948022317&fm=253&fmt=auto&app=138&f=JPEG?w=949&h=500"
                alt=""></li>
        <li><img src="https://img-qn-2.51miz.com/preview/element/00/01/26/78/E-1267851-365BEB89.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320"
                alt=""></li>
        <li><img src="https://img-qn-0.51miz.com/Element/01/03/07/38/b3469341_E1030738_e7d254a9.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320"
                alt=""></li>
        <li><img src="https://img-qn-5.51miz.com/preview/element/00/01/27/83/E-1278373-F77C4BFC.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320"
                alt=""></li>
    </ul>
    <a
        href="https://www.bilibili.com/video/BV1Sy4y1C7ha?p=217&spm_id_from=pageDriver&vd_source=480c28921b1b6c12cb33e4a6f0a94947">学习视频链接</a>
    <script>
        let imgs = document.querySelectorAll('img');
        //let body = document.querySelector('body');
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>